<template>
    <div class="app-container followUpContainers">
        <div class="followUpContainers_left" ref="statisticalFollowUpLeft" :style="{height:statisticalFollowUpLeftH}">
            <div class="followUpContainers_left_content formBox">
                <div class="followUpContainers_left_top">
                    <el-button icon="el-icon-circle-plus-outline" type="primary" @click="addfollowUpCustom">新增随访</el-button>
                </div>
                <div class="followUpContainers_left_inner">
                    <div class="followUpContainers_left_inner_title">
                        随访状态
                    </div>
                    <div class="followUpContainers_left_inner_list">
                        <div class="followUpContainers_left_inner_list_item" v-for="dict in statusArr"
                            :key="dict.value" @click="changeBtnStatus(dict.value)" :class="btnStatus == dict.value ?'active':''">
                            <i class="el-icon-s-order"></i>
                            <div class="followUpContainers_left_inner_list_item_name">
                                {{ dict.label }} ({{ dict.account }})
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="followUpContainers_right">
            <!--专病数据-->
            <el-form class="formBox formBox1" :model="queryParams" ref="queryForm" size="small" :inline="true"
                v-show="showSearch" label-width="68px">

                <el-form-item label="随访日期">
                    <el-date-picker v-model="dateRange" style="width: 145px;" value-format="yyyy-MM-dd" type="daterange" class="followDate"
                        size="mini" range-separator="-" :picker-options="pickerOptions" start-placeholder="开始日期"
                        end-placeholder="结束日期" @change="handleQuery" :clearable="false"></el-date-picker>
                </el-form-item>

                <!-- <el-form-item label="随访状态" prop="status" clearable>
                    <el-select v-model="queryParams.status" placeholder="随访状态" clearable filterable
                        style="width: 160px">
                        <el-option v-for="dict in statusArr" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item> -->

                <el-form-item label="专病">
                    <el-select v-model="queryParams.diseaseClassifyName" filterable placeholder="专病名称" clearable
                        style="width: 145px">
                        <el-option v-for="item in classifyList" :key="item.diseaseClassifyId"
                            :label="item.diseaseClassifyName" :value="item.diseaseClassifyName" />
                    </el-select>
                </el-form-item>
                <el-form-item label="反馈情况" prop="status" clearable>
                    <el-select v-model="queryParams.planType" placeholder="反馈情况" clearable filterable
                        style="width: 145px">
                        <el-option v-for="dict in feedBackArr" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="随访方式" prop="status" clearable>
                    <el-select v-model="queryParams.planType" placeholder="随访方式" clearable filterable
                        style="width:145px">
                        <el-option v-for="dict in plansTypes" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="问卷表名" v-if="queryParams.planType == 2">
                    <el-select v-model="dict.form" placeholder="问卷表名" clearable filterable style="width:145px">
                        <el-option v-for="dict in classifyList" :key="dict.diseaseClassifyId"
                            :label="dict.diseaseClassifyName" :value="dict.diseaseClassifyId" />
                    </el-select>
                </el-form-item>


                <el-form-item label="顾客编号" prop="visitNum">
                    <el-input v-model="queryParams.visitNum" placeholder="顾客编号" clearable style="width:145px"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="顾客ID" prop="patientId">
                    <el-input v-model="queryParams.patientId" placeholder="顾客ID" clearable style="width: 145px"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="姓名" prop="patientName">
                    <el-input v-model="queryParams.patientName" placeholder="顾客姓名" clearable style="width: 145px"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="手机号" prop="patientPhone">
                    <el-input v-model="queryParams.patientPhone" placeholder="顾客手机号" clearable style="width: 145px"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="顾客状态" prop="status">
                    <el-select v-model="queryParams.status" filterable placeholder="诊断状态" clearable
                        style="width: 145px">
                        <el-option v-for="dict in dict.type.sys_diagnosis_status" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <!-- <el-button icon="el-icon-printer" size="mini" @click="resetQuery">打印</el-button> -->
                </el-form-item>



            </el-form>
            <div class="formBox searchForm" ref="statisticalTable" style="margin-bottom:0px!important;">
                <el-row :gutter="10" class="mb8">
                    <!-- <el-col :span="1.5">
                        <el-button type="info" :plain="btnStatus == 0 ? false : true" icon="el-icon-circle-plus-outline"
                            size="mini" @click="changeBtnStatus(0)">公共随访池</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" :plain="btnStatus == 1 ? false : true" icon="el-icon-remove-outline"
                            size="mini" @click="changeBtnStatus(1)">未随访</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="success" :plain="btnStatus == 2 ? false : true" icon="el-icon-circle-check"
                            size="mini" @click="changeBtnStatus(2)">我已随访</el-button>
                    </el-col> -->
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="handleQuery"></right-toolbar>
                </el-row>
                <el-table border v-loading="loading" :data="tableLists" :height="statisticalTableH" ref="table">
                    <el-table-column label="顾客ID" align="center" prop="patientId" :show-overflow-tooltip="true"
                        width="100" />
                    <el-table-column label="顾客编号" align="center" prop="visitNum" :show-overflow-tooltip="true"
                        width="200" />
                    <el-table-column label="顾客姓名" align="center" prop="patientName" :show-overflow-tooltip="true"
                        width="100" />
                    <el-table-column label="性别" align="center" prop="sex" :show-overflow-tooltip="true" width="50">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
                        </template>
                    </el-table-column>
                    <el-table-column label="年龄" align="center" prop="age" :show-overflow-tooltip="true" width="50">

                    </el-table-column>
                    <el-table-column label="诊断" align="center" prop="roleNames" :show-overflow-tooltip="true"
                        width="200">
                        <template slot-scope="scope">

                        </template>
                    </el-table-column>
                    <el-table-column label="方案" align="center" prop="roleNames" :show-overflow-tooltip="true"
                        width="200">
                        <template slot-scope="scope">

                        </template>
                    </el-table-column>
                    <el-table-column label="首诊日期" align="center" prop="roleNames" :show-overflow-tooltip="true"
                        width="200">
                        <template slot-scope="scope">

                        </template>
                    </el-table-column>
                    <el-table-column label="随访状态" align="center" prop="roleNames" :show-overflow-tooltip="true"
                        width="100">
                        <template slot-scope="scope">

                        </template>
                    </el-table-column>
                    <el-table-column label="随访类型" align="center" prop="roleNames" :show-overflow-tooltip="true"
                        width="100">
                        <template slot-scope="scope">

                        </template>
                    </el-table-column>
                    <el-table-column label="待随访日期" align="center" prop="roleNames" :show-overflow-tooltip="true"
                        width="200">
                        <template slot-scope="scope">

                        </template>
                    </el-table-column>
                    <el-table-column label="随访表单名" align="center" prop="roleNames" :show-overflow-tooltip="true"
                        width="100">
                        <template slot-scope="scope">

                        </template>
                    </el-table-column>
                    <el-table-column label="表单反馈" align="center" prop="roleNames" :show-overflow-tooltip="true"
                        width="100">
                        <template slot-scope="scope">

                        </template>
                    </el-table-column>
                    <el-table-column label="随访角色" align="center" prop="roleNames" :show-overflow-tooltip="true"
                        width="100">
                        <template slot-scope="scope">

                        </template>
                    </el-table-column>
                    <el-table-column label="随访日期" align="center" prop="roleNames" :show-overflow-tooltip="true"
                        width="100">
                        <template slot-scope="scope">

                        </template>
                    </el-table-column>
                    <el-table-column label="随访人" align="center" prop="roleNames" :show-overflow-tooltip="true"
                        width="100">
                        <template slot-scope="scope">

                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width"
                        width="120">
                        <template slot-scope="scope">

                            <el-row>
                                <el-button size="mini" type="text" icon="el-icon-folder"
                                    @click="goFollowUpDetail(scope.row)">查看随访详情</el-button>
                                <!-- <el-button size="mini" type="text" icon="el-icon-folder"
                                    @click="goDetail(scope.row)">查看顾客详情</el-button> -->

                                <!-- <el-button size="mini" type="text" icon="el-icon-circle-plus-outline"
                                @click="addPlan(scope.row)">新增</el-button> -->
                                <el-button size="mini" type="text" icon="el-icon-edit"
                                    @click="editFollowUpDetail(scope.row)">记录</el-button>
                                <!-- <el-button size="mini" type="text" icon="el-icon-upload2">共享</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete">删除</el-button> -->
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </div>
        </div>

        <!-- 详情 -->
        <el-dialog :title="detailTitle" :visible.sync="detailDialogVisible" width="85%" append-to-body v-dialogDrag
            :close-on-click-modal="false">
            <CustomerDetails v-if="detailDialogVisible" :basicInfo="baseInfo"></CustomerDetails>
        </el-dialog>

        <!-- 新增或者修改随访记录 -->
        <el-dialog :title="followAddTitle" :visible.sync="followAddDialogVisible" width="85%" center v-dialogDrag>
            <followRecord v-if="followAddDialogVisible" :baseInfo="baseInfo"
                @closefollowAddDialogVisible="closefollowAddDialogVisible">
            </followRecord>
        </el-dialog>

        <!-- 修改顾客随访计划 -->
        <el-dialog :title="followPlanAddTitle" :visible.sync="followPlanAddDialogVisible" width="85%" center
            v-dialogDrag>
            <followAdd v-if="followPlanAddDialogVisible" :baseInfo="baseInfo"
                @closefollowPlanAddDialogVisible="closefollowPlanAddDialogVisible">
            </followAdd>
        </el-dialog>
        <!-- 新增新的顾客随访 -->
        <el-dialog title="新顾客随访" :visible.sync="customFollowAddDialogVisible" width="85%" center
            v-dialogDrag>
            <customFollowAdd v-if="customFollowAddDialogVisible" 
                @closecustomFollowAddDialogVisible="closecustomFollowAddDialogVisible">
            </customFollowAdd>
        </el-dialog>
    </div>
</template>

<script>
import followRecord from '@/views/components/followUp/followRecord'
import followAdd from '@/views/components/followUp/followAdd'
//customFollowAdd
import customFollowAdd from '@/views/components/followUp/customFollowAdd'
import CustomerDetails from '@/views/components/customerDetail/customerDetail'
import {
    listVisitTip,
} from "@/api/patientRegistration/registrationList";
import {
    listClassify,
} from "@/api/system/classify";
export default {
    name: "userSum",
    dicts: [
        'sys_diagnosis_status',
        'sys_user_sex'
    ],
    components: { CustomerDetails, followRecord, followAdd,customFollowAdd },
    data() {
        return {
            customFollowAddDialogVisible:true,
            statisticalFollowUpLeftH:undefined,
            statisticalTableH: undefined,
            followPlanAddTitle: '',
            followAddTitle: '',
            followAddDialogVisible: false,
            followPlanAddDialogVisible: false,
            statusArr: [
                {
                    value: "",
                    label: '全部',
                    account: 100,
                },
                {
                    value: "1",
                    label: '未随访',
                    account: 50,
                },
                {
                    value: "2",
                    label: '已随访',
                    account: 50,
                },
                {
                    value: "3",
                    label: '已取消',
                    account: 0,
                }
            ],
            feedBackArr: [
                {
                    value: "1",
                    label: '未填写'
                },
                {
                    value: "2",
                    label: '已填写'
                }
            ],
            plansTypes: [
                {
                    value: "1",
                    label: '电话'
                }, {
                    value: "2",
                    label: '小程序问卷'
                }, {
                    value: "3",
                    label: '小程序复诊提醒'
                }, {
                    value: "4",
                    label: '小程序拍照提醒'
                }, {
                    value: "5",
                    label: '微信'
                }
            ],
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '前天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近1年',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            loading: true,
            tableLists: [],
            classifyList: [],
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 日期范围
            dateRange: [],
            // 表单参数
            // form: {},
            form: {

            },
            baseInfo: { updateStatus: false, },
            detailTitle: '',
            detailDialogVisible: false,

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                status: '',
                planType: '',
                diseaseClassifyName: ''
            },
            btnStatus: 0,
        };
    },
    watch: {
        showSearch() {
            this.$nextTick(() => {
                this.changeHeight()
            }, 1000)

        }
    },
    async created() {
        this.getClassifyList();

    },
    computed: {

    },
    updated() {
        this.$nextTick(() => {
            this.$refs.table.doLayout()
        })
    },
    mounted() {
        this.changeHeight()
       
    },
    methods: {
        closecustomFollowAddDialogVisible(){
            this.customFollowAddDialogVisible=false
        },
        addfollowUpCustom(){ //新增顾客随访
            this.customFollowAddDialogVisible=true
        },
        changeHeight() {//计算table 高度
            if (this.$refs.statisticalTable) {
                const statisticalTableObj = this.$refs.statisticalTable.getBoundingClientRect();
                let h = statisticalTableObj.top + 100
                this.statisticalTableH = 'calc(100vh - ' + h + 'px)'
            } else {
                this.statisticalTableH = '500px'
            }
            this.changeHeightFollow()
        },
        changeHeightFollow() {//计算左测导航栏高度
            if (this.$refs.statisticalFollowUpLeft) {
                const statisticalTableObj = this.$refs.statisticalFollowUpLeft.getBoundingClientRect();
                let h = statisticalTableObj.top + 10
                this.statisticalFollowUpLeftH = 'calc(100vh - ' + h + 'px)'
            } else {
                this.statisticalFollowUpLeftH = '500px'
            }
        },
        closefollowAddDialogVisible() {
            this.followAddDialogVisible = false
        },
        closefollowPlanAddDialogVisible() {
            this.followPlanAddDialogVisible = false
        },
        addPlan(row) {
            this.followPlanAddTitle = '新增随访'
            this.baseInfo = row
            this.baseInfo.updateStatus = false
            this.followPlanAddDialogVisible = true
        },
        changeBtnStatus(type) {
            this.btnStatus = type
        },
        goFollowUpDetail(row) {
            this.followAddTitle = '随访详情'
            this.baseInfo = row
            this.baseInfo.updateStatus = true
            this.followAddDialogVisible = true
        },
        editFollowUpDetail(row) {
            this.followAddTitle = '新增随访记录'
            this.baseInfo = row
            this.baseInfo.updateStatus = false
            this.followAddDialogVisible = true
        },
        // 获取专病列表
        getClassifyList() {
            listClassify(
                {
                    pageNum: 1,
                    pageSize: 9999,
                    status: 0
                }
            ).then((response) => {
                this.classifyList = response.rows;
                this.getList()
            });
        },
        getRoles(Roles) {
            let roleHtml = ''

            if (Roles && Roles.length > 0) {
                Roles.forEach(function (ele, index) {
                    if (index != Roles.length - 1) {
                        roleHtml += ele.roleName + '、'
                    } else {
                        roleHtml += ele.roleName
                    }


                })

            }
            return roleHtml
        },
        // 真实序号计算（计算分页影响）
        getIndex(index) {
            return (this.queryParams.pageNum - 1) * this.queryParams.pageNum + index + 1;
        },
        /** 查询设备列表 */
        getList() {
            let that = this
            that.loading = true;
            let params = {
                startTime: that.dateRange[0],
                endTime: that.dateRange[1],
                ...that.queryParams
            }
            listVisitTip(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
                let data = response.rows
                this.tableLists = [data[0]];
                this.total = 1;//response.total;
                this.loading = false;
            });

        },
        goDetail(row) {
            this.detailTitle = '顾客详情'
            this.baseInfo = row
            this.detailDialogVisible = true

        },
        // 取消按钮
        cancel() {

        },

        // 表单重置
        reset() {

        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },



    },
};
</script>
<style scoped lang="scss">
.followDate{
    padding:3px 2px;
    ::v-deep .el-range__close-icon{
        width:0px;
        display:none;
    }
    ::v-deep .el-range-input{
        width:44%;
    }
    ::v-deep .el-range__icon{
        display:none;
    }
    // ::v-deep .el-input__inner{
    //     padding:3px 2px;
    // }
}
.followUpContainers {
    display: flex;
    justify-content: space-between;
    &_left {
        width: 160px;
        &_content {
            height:100%;
            background: #fff;
        }
        &_inner {
            margin-top: 10px;
          &_title{
             font-size:15px;
             font-weight:800;
          }
          &_list{
            margin-top:10px;
            padding:0 8px;
            &_item{
                cursor: pointer;
                color:#333;
                display: flex;
                align-items: center;
               padding:8px 4px;
               font-size:14px;
               border-bottom: 1px solid #eee;
               border-radius: 4px;
               &_name{
                 margin-left:6px;
               }
            }
            &_item.active{
                color:#fff!important;
                background:#f56c6c;
            }
          }
        }
    }

    &_right {

        width: calc(100% - 170px);
    }
}
</style>
